<template>
  <view class="box">
    <view class="title">
      <image
        style="width: 15%; object-fit: cover"
        src="@/static/images/待处理详情-办公室/u3873.svg"
        mode="scaleToFill"
      />
      <text style="padding-left: 20px; font-size: 36rpx"
        >{{ form.startUsername }}的用车申请流程-{{
          form.createTime.slice(0, 10)
        }}</text
      >
    </view>
    <view class="contain">
      <view v-for="item in list" :key="item.lable" class="contain_box">
        <view class="left"> {{ item.label }}</view>
        <view class="right">
          <text> {{ item.value }}</text>
        </view>
      </view>
      <view class="info"> 行程信息 </view>
      <view
        v-for="(item, index) in form.variables.driveInfoList"
        :key="index"
        class="info1"
      >
        <text> 行程{{ index + 1 }}：</text>
        <text> 起始地：{{ item.origin }} - 途径地：{{ item.pass }}</text>
      </view>
    </view>

    <!-- 审批流程 -->
    <view class="bottom">
      <u-cell-group>
        <u-cell
          title="审批流程"
          label="已有管理员预设审批人，不可修改和删除"
          center
        ></u-cell>
      </u-cell-group>
      <view v-for="(item, index) in flow" :key="index" class="step">
        <template
          v-if="
            !['candidate', 'sequenceFlow', 'endEvent', 'startEvent'].includes(
              item.historyActivityType
            )
          "
        >
          <view class="step_left">
            <uni-icons type="person" size="30"></uni-icons>
            <view class="line"></view>
            <!-- <uni-icons type="person" size="30"></uni-icons> -->
          </view>
          <view class="step_right">
            <view class="step_right_title">
              <text>{{
                item.historyActivityType == "endEvent"
                  ? "结束"
                  : item.historyActivityName || "未命名"
              }}</text>
              <template v-if="item.comments && item.comments.length > 0">
                <text
                  v-if="
                    item.endTime &&
                   item.comments[0].action === 'AddComment'&& item.comments[0].type === 'rollbackComment'
                  "
                  style="color: #dc1e33; padding-left: 10px"
                >
                  已驳回
                </text>
                <text
                  v-else-if="
                    item.endTime && item.comments[0]
                      ? item.comments[0].action === 'AddComment'
                      : ''
                  "
                  style="color: #3ab4f1; padding-left: 10px"
                >
                  已同意
                </text>
              </template>
              <text
                v-if="!item.endTime"
                style="color: #3ab4f1; padding-left: 10px"
              >
                待审批
              </text>
            </view>
         
            <!-- 驳回原因 -->
            <view
              v-if="
                item.endTime && item.comments[0]
                  ?item.comments[0].action === 'AddComment'&& item.comments[0].type === 'rollbackComment'
                  : ''
              "
              class="step_right_con"
            >
              <view style="height: 40px; line-height: 40px">
                <text>{{ item.assigneeName }}</text>
                <text style="padding-left: 35%; font-size: 13px; color: #b3bbc9"
                  >已驳回 {{ item.endTime.slice(0, 10) }}</text
                >
              </view>
              <view style="color: #dc1e33">驳回原因：{{item.comments[0].fullMessage}}</view>
            </view>
               <!-- 通过 -->
            <view   v-else-if="
                  item.endTime && item.comments[0]
                    ? item.comments[0].action === 'AddComment'
                    : ''
                " class="step_right_con" style="line-height: 40px">
              <text>{{ item.assigneeName }}</text>
              <text
              
                style="padding-left: 35%; font-size: 13px; color: #b3bbc9"
              >
                已同意 {{ item.endTime.slice(0, 10) }}</text
              >
            </view>
          </view>
        </template>
      </view>
    </view>

    <!-- 用车评价 -->
    <view
      v-for="(item, index) in carEvaluationList"
      :key="index"
      class="appraise"
    >
      <h3>用车评价</h3>
      <view class="appraise_con1">车牌号码：{{ item.carId }}</view>
      <view class="appraise_con">
        <text>评价：</text>
        <u-rate
          size="40rpx"
          :count="count"
          v-model="item.safeDrive"
          gutter="20"
        ></u-rate>
      </view>
      <view class="appraise_con1">备注： {{ item.remarks }}</view>
      <view class="appraise_con2">评价人：{{ item.createUser }}</view>
      <view class="appraise_con2">评价时间：{{ item.createTime }}</view>
    </view>
    <!-- 用车凭证 -->
    <view v-if="officeDocumentList.length > 0" class="ping">
      <h4>用车凭证</h4>
      <view
        @click="download(item)"
        v-for="(item, index) in officeDocumentList"
        :key="index"
        class="ping_xia"
      >
        <text>{{ item.fileName }}</text>
        <text style="padding-left: 40%">下载</text>
      </view>
    </view>
    <view style="height: 100px"></view>
    <!-- 底部按钮 -->
    <view class="below">
      <u-button
        v-if="carEvaluationList.length == 0 && types != '0'"
        @click="dialogShow"
        style="width: 90%; display: block; line-height: 40px; margin: 5%"
        type="primary"
        text="评价"
      ></u-button>
      <view class="below">
        <u-button
          v-if="types == '0'"
          @click="dialogShows('驳回')"
          style="
            width: 40%;
            display: inline-block;
            line-height: 40px;
            margin: 5%;
          "
          type="primary"
          text="驳回"
        ></u-button>
        <u-button
          v-if="types == '0'"
          @click="dialogShows('通过')"
          style="
            width: 40%;
            display: inline-block;
            line-height: 40px;
            margin: 5%;
          "
          type="primary"
          text="通过"
        ></u-button>
      </view>
    </view>
    <!-- 驳回通过弹窗 -->
    <u-modal
      showCancelButton
      :show="isShow"
      :title="type === '通过' ? '通过确认' : '驳回确认'"
      @confirm="dialogConfirm"
      @cancel="dialogClose"
    >
      <view style="width: 100%; justify-content: start">
        <h4 style="text-align: center">
          确定要{{ type === "通过" ? "通过" : "驳回" }}该申请吗?
        </h4>
        <uni-forms ref="baseForm" :rules="rules" :model="baseFormData">
          <uni-forms-item
            class="label"
            :label="type === '通过' ? '备注:' : '原因:'"
            :required="type === '驳回'"
            name="comment"
          >
            <uni-easyinput
              style="width: 100%"
              type="textarea"
              v-model="baseFormData.comment"
              placeholder="请输入"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </u-modal>
    <!-- 评价弹窗 -->
    <u-modal
      @cancel="cancelModal"
      @confirm="confirmModal"
      showCancelButton
      :show="show"
      title="评价确认"
    >
      <view class="slot-content">
        <uni-forms
          label-width="100px"
          ref="baseForm"
          :rules="rules"
          :model="carEvaluationForm"
        >
          <uni-forms-item class="label" label="车牌号码" required name="carId">
            <uni-data-select
              v-model="carEvaluationForm.carId"
              :localdata="range"
              @change="pingChange"
              placeholder="请选择"
            ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item class="label" label="核载人数" required name="seats">
            <uni-easyinput
              disabled
              v-model="carEvaluationForm.seats"
              placeholder="请输入核载人数"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="驾驶员" required name="driverId">
            <uni-data-select
             disabled
              v-model="carEvaluationForm.driverId"
              :localdata="driverRange"
              placeholder="请选择驾驶员"
            ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item
            class="label"
            label="安全驾驶"
            required
            name="safeDrive"
          >
            <uni-rate
              v-model="carEvaluationForm.safeDrive"
              @change="onChange"
            />
          </uni-forms-item>
          <uni-forms-item
            class="label"
            label="服务质量"
            required
            name="serviceQuality"
          >
            <uni-rate
              v-model="carEvaluationForm.serviceQuality"
              @change="onChange"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="备注" required name="remarks">
            <uni-easyinput
              type="textarea"
              v-model="carEvaluationForm.remarks"
              placeholder="请输入评价"
            ></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { detail, completeTask } from "@/api/index";
import { officeDocument, save, carInfo } from "@/api/usercar";
import { carEvaluation } from "@/api/vehiclefees";
export default {
  name: "cardetail",
  data() {
    return {
      show: false,
      isShow: false,
      type: "",
      types: "",
      row: {},
      //通过驳回
      baseFormData: {
        comment: "",
      },
      //评价
      carEvaluationForm: {
        carId: "", //车牌号码
        safeDrive: "", //安全行驶
        serviceQuality: "", //服务质量
        remarks: "", //备注
        driverId: "", //驾驶员
      },
      form: {
        createTime: "",
        variables: {
          driveInfoList: [],
        },
      },
      flow: [],
      rules: {
        fees: {
          rules: [
            {
              required: true,
              errorMessage: "原因说明不能为空",
            },
          ],
        },
      },
      list: [
        {
          label: "审批编号",
          value: "",
        },
        {
          label: "提交时间",
          value: "",
        },
        {
          label: "申请部门",
          value: "",
        },
        {
          label: "用车人",
          value: "",
        },
        {
          label: "乘车人数",
          value: "",
        },
        {
          label: "起始时间",
          value: "",
        },
        {
          label: "结束时间",
          value: "",
        },
        {
          label: "用车事由",
          value: "",
        },
      ],
      carEvaluationList: [], //用车评价
      officeDocumentList: [], //用车凭证
      range: [],
      driverRange: [],
      carList:[],
      count: 5,
    };
  },
  onLoad(options) {
    this.types = options.type;
    const row = JSON.parse(options.row);
    this.row = row;
    this.getList();
  },

  mounted() {},

  methods: {
    //获取详情
    async getList() {
      //详情
      const { data } = await detail(
        this.row.taskId,
        this.row.processInstanceId
      );
      this.form = data.process;
      this.flow = data.flow;
      this.list.forEach((item) => {
        if (item.label === "审批编号") {
          item.value = this.form.variables.serialNumber;
        }
        if (item.label === "提交时间") {
          item.value = this.form.variables.createDate;
        }
        if (item.label === "申请部门") {
          item.value = this.form.variables.useDeptName;
        }
        if (item.label === "用车人") {
          item.value = this.form.variables.usePeople;
        }
        if (item.label === "乘车人数") {
          item.value = this.form.variables.usePeopleNum;
        }
        if (item.label === "起始时间") {
          item.value = this.form.variables.startTime;
        }
        if (item.label === "结束时间") {
          item.value = this.form.variables.endTime;
        }
        if (item.label === "用车事由") {
          item.value = this.form.variables.useReason;
        }
      });
      // 用车评价
      const res = await carEvaluation(this.form.variables.id);
      this.carEvaluationList = res.data.records;
      //用车凭证
      const ress = await officeDocument(this.form.variables.id);
      this.officeDocumentList = ress.data.records;
    },

    onChange(val) {},

    download(item) {
      uni.downloadFile({
        url: item.fileUrl, //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            console.log("下载成功");
          }
        },
      });
    },
    pingChange(val) {
      const arr = this.carList.find(
        (item) => item.id === val
      );
      this.carEvaluationForm.seats = arr.seats;
      this.carEvaluationForm.driverId = arr.id;
    },
    async dialogShow() {
      const res = await carInfo(this.form.variables.id);
      this.carList=res.data
      this.range = res.data.map((item) => {
        return {
          text: item.carNumber,
          value: item.id,
        };
      });
      this.driverRange = res.data.map((item) => {
        return {
          text: item.driverName,
          value: item.id,
        };
      });
      this.show = true;
    },

    dialogShows(type) {
      this.type = type;
      if (type === "驳回") {
      } else {
      }
      this.isShow = true;
    },
    //通过驳回确认按钮
    async dialogConfirm() {
      const value = {
        ...this.baseFormData,
        pass: this.type === "通过" ? true : false,
        processDefinitionId: this.form.processDefinitionId,
        processDefinitionName: this.form.processDefinitionName,
        processInstanceId: this.form.processInstanceId,
        taskId: this.form.taskId,
        variables: this.form.variables,
      };
      const res = await completeTask(value);
      if (res.code == 200) {
        uni.showToast({
          title: "操作成功",
        });
        this.getList();
      } else {
        uni.showToast({
          title: "操作失败",
          icon: "error",
        });
      }
      this.baseFormData = {
        comment: "",
      };
      this.isShow = false;
    },
    //通过驳回取消按钮
    dialogClose() {
      this.baseFormData = {
        comment: "",
      };
      this.isShow = false;
    },

    //评价确认按钮
    async confirmModal() {
      const value = {
        ...this.carEvaluationForm,
        applyCarId: this.form.variables.id, //申请车辆id
      };
      const res = await save(value);
      if (res.code == 200) {
        uni.showToast({
          title: "评价成功",
        });
        this.getList();
      } else {
        uni.showToast({
          title: "评价失败",
          icon: "error",
        });
      }
      this.show = false;
    },
    //评价取消按钮
    cancelModal() {
      this.carEvaluationForm = {
        carId: "", //车牌号码
        safeDrive: "", //安全行驶
        serviceQuality: "", //服务质量
        remarks: "", //备注
        driverId: "", //驾驶员
      };
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.title {
  background-color: #fff;
  padding: 10px;
  width: 100%;
  height: 80px;
}
.contain {
  background-color: #fff;
  width: 100%;
  // height: 500px;
  padding: 10px;
  margin: 15px 0;
  .contain_box {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    .left {
      flex: 1;
      color: #aaaaaa;
    }
    .right {
      flex: 4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 30px;
    }
  }
}
.info {
  color: #aaaaaa;
  padding: 0 0 10px 0;
}
.info1 {
  padding: 10px 0;
}
.bottom {
  background-color: #fff;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 2%;
}
.step {
  display: flex;
  padding: 10px;
  width: 100%;
  .step_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .line {
      width: 1px;
      background-color: #4265f3;
      height: 80px;
      // margin: auto;
      margin: 0 auto;
    }
  }
  .step_right {
    flex: 6;
    .step_right_title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .step_right_con {
      height: 80px;
      font-size: 14px;
      // line-height: 40px;
      padding-left: 50px;
    }
  }
}
.ping {
  background-color: #fff;
  margin: 20px 0;
  width: 100%;
  height: 100px;
  padding: 20px;
  .ping_xia {
    color: #4261f2;
    font-size: 14px;
    line-height: 50px;
  }
}
.appraise {
  width: 100%;
  height: 500rpx;
  margin: 20px 0;
  padding: 10px 20px;
  font-size: 14px;
  background-color: #fff;
  line-height: 40px;
  .appraise_con {
    display: flex;
  }
  .appraise_con2 {
    color: #b6b6b6;
  }
}
</style>